<template>
  <div>
    <Row>
      <Col span="8">
        <Card>
          <p slot="title">
            <Icon type="ios-film-outline"></Icon>已就业数量
          </p>
          <div style="text-align:center">
            <span style="font-size:40px;text-align:center;color:green">{{countobj.yjjcount}}</span> /人
          </div>
        </Card>
      </Col>
      <Col span="8">
        <Card>
          <p slot="title">
            <Icon type="ios-film-outline"></Icon>待就业数量
          </p>
          <div style="text-align:center">
            <span style="font-size:40px;text-align:center;color:orange">{{countobj.dyjcount}}</span> /人
          </div>
        </Card>
      </Col>
      <Col span="8">
        <Card>
          <p slot="title">
            <Icon type="ios-film-outline"></Icon>优质就业数量
          </p>
          <div style="text-align:center">
            <span style="font-size:40px;text-align:center;color:red">{{countobj.yjjcount}}</span> /人
          </div>
        </Card>
      </Col>
    </Row>
    <Swiper class="banner" :options="swiperOption">
      <Swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
        <div style="width:100%;height:100%;" :style="{background:slide}"></div>
      </Swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </Swiper>
    <Row>
      <Col span="12">
        <div ref="chart1" style="height:300px;width:100%;"></div>
      </Col>
      <Col span="12">
        <div ref="chart2" style="height:300px;width:100%"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import "swiper/dist/css/swiper.css";
import {
  swiper as Swiper,
  swiperSlide as SwiperSlide
} from "vue-awesome-swiper";
var echarts = require("echarts");
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        autoplay: true,
        delay: 1000,
        pagination: {
          el: ".swiper-pagination"
        },
        effect: "cube"
      },
      swiperSlides: ["red", "green", "orange"],
      countobj: { yjjcount: 0, dyjcount: 0, yzjycount: 0 }
    };
  },
  mounted() {
    this.loadCount();
    this.loadEcharts();
  },
  methods: {
    loadChart1(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.chart1);
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["一", "二", "三", "四", "五"]
        },
        yAxis: {
          type: "value"
        },
        tooltip: {
          trigger: "item",
          formatter: "周{b}就业 {c} 人"
        },
        series: [
          {
            data,
            type: "line"
          }
        ]
      });
    },
    loadChart2(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.chart2);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["Java", "前端", "UI", "ACCP"]
        },
        series: [
          {
            name: "就业方向",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data
          }
        ]
      });
    },
    loadEcharts() {
      this.getHomeBZSJ().then(res => {
        this.loadChart1(res.data);
      });

      this.getHomeBZLXSJ().then(res => {
        this.loadChart2(res.data);
      });
    },
    ...mapActions("system", ["getHomeCount", "getHomeBZSJ", "getHomeBZLXSJ"]),
    loadCount() {
      this.getHomeCount().then(res => {
        this.countobj = res.data;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.banner {
  height: 50px;
}
</style>
